<!--  线 + 柱混合图 -->
<template>
  <div class="box">
    <div class="box-title">低碳运营</div>
    <div class="sub-title">累计节能 (2022)</div>
    <div class="message">
      <span class="money">17193 </span>元 <span class="tong"> 同比</span
      ><span class="precent"><svg-icon icon-class="down" />6%</span>
    </div>

    <div :id="id" style="height: 160px;margin-top: -20px"></div>

    <!--折叠面板-->
    <div class="top-panel" :style="'height:' + topPanelHeight">
      <div class="top-panel-top">
        <div class="left">
          <span class="left-svg"><svg-icon icon-class="alarm" /></span>
          <span class="top-panel-title">优化目标 TOP5</span>
        </div>
        <div @click="topChange" class="right">
          <span v-if="!isTopShow"
            >展开 <svg-icon icon-class="arrow-down" />
          </span>
          <span v-if="isTopShow">收起 <svg-icon icon-class="arrow-up" /> </span>
        </div>
      </div>
      <div v-show="isTopShow" class="top-panel-bottom">
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
        <div class="rank-item">
          <div class="left">开关跳闸预警</div>
          <div class="right">33</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted,watchEffect } from "vue";
import { useAppStore } from "@/store";
import { useResizeObserver } from '@vueuse/core';

const appStore = useAppStore();

const props = defineProps({
  id: {
    type: String,
    default: "operate",
  },
});

//折叠面板
const isTopShow = ref(false);

const topPanelHeight = ref("60px");

function topChange() {
  isTopShow.value = !isTopShow.value;
  topPanelHeight.value = isTopShow.value ? "200px" : "60px";
  console.log(topPanelHeight.value);
}

// echarts配置
const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
  },
  grid:{
    left:35,
    right:0
    // bottom:'middle'
  },
  title: {
    // title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
    subtext:  "kWh",
    left:3, // 距离左边位置
    top: 20, // 距离上面位置
    subtextStyle: {
      // 设置二级标题的样式
      color: "#9da9ab",
      fontSize: "10",
    },
  },
  legend: {
    data: ["实际节能", "潜在节能"],
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 20,
    x:160,
    textStyle: {
      color: "#aeb8b9",
      fontSize: 9,
    }
  },

  xAxis: {
    splitLine: {
      show: false,
    },
    axisTick: {
      //坐标轴刻度
      show: false,
    },
    axisLine: {
      //坐标轴轴线
      show: false,
    },
    axisLabel: {
      margin:15,
      interval: 0, // 设置为 0 强制显示所有标签
      textStyle: {
        fontSize: 10,
        color: "#aeb8b9",
      },
    },
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },

  yAxis: {
    splitLine: {
      show: false,
    },
    interval: 500,
    type: "value",
    axisLabel: {
      margin: 8, // 调整标签与轴线之间的距离
    },
    axisLabel: {
      interval: 0, // 设置为 0 强制显示所有标签
      textStyle: {
        fontSize: 10,
        color: "#aeb8b9",
      },
    },
  },
  series: [
    {
      name: "实际节能",
      type: "bar",
      stack: "总量",
      barWidth: '60%',
      barGap: '50%', // 同一类目的柱间隔设为20%
      data: [320, 332, 601, 334, 390, 330, 520, 320, 332, 301, 334, 390],
      itemStyle:{
        color:'#069055'
      }
    },
    {
      name: "潜在节能",
      type: "bar",
      stack: "总量",
      barWidth: '60%',
      barGap: '50%', // 同一类目的柱间隔设为20%
      data: [120, 132, 101, 134, 60, 230, 210, 820, 332, 301, 334, 690],
      itemStyle:{
        color:'#1f4d3c',
      }
    },
  ],
};
const chart = ref<any>("");
const chartWidth = '100%'


onMounted(() => {
  // 图表初始化
  chart.value = markRaw(
    echarts.init(document.getElementById(props.id) as HTMLDivElement)
  );

  nextTick(() => {
    // 要放在对响应式数据修改之后
    chart.value.setOption(options);
  });

  // 大小自适应
  window.addEventListener("resize", () => {
    console.log("变化")
    chart.value.resize();
  });

});

console.log(appStore.$state.sidebar.opened)

//图标重置
function resize(){
  if(chart.value){
    chart.value.resize()
  }
}

watchEffect(() => {
  nextTick(() => {
    useResizeObserver(document.getElementById(props.id), ()=>{
      resize()
    });
  });

});
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  border-radius: 16px;
  padding: 20px 20px;
  background-color: #293030;
  width: 100%;
  height: 100%;

  .box-title {
    font-size: 19px;
    margin-bottom: 5px;
  }

  .sub-title {
    font-size: 14px;
    color: #9da9ab;
  }

  .message {
    font-size: 12px;

    .money {
      font-size: 20px;
    }

    .tong {
      color: #9da9ab;
    }

    .precent {
      color: red;
    }
  }

  .top-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #3f4847;
    border-radius: 14px;
    padding: 0 20px;
    padding-top: 18px;
    height: v-bind(topPanelHeight);
    transition: all 0.2s;

    .top-panel-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        .top-panel-title {
          font-size: 16px;
        }

        .left-svg {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }

      .right {
        font-size: 12px;
        color: #9da9ab;
      }
    }

    .top-panel-bottom {
      .rank-item {
        display: flex;
        align-items: center;
        height: 20%;
        justify-content: space-between;
        font-size: 12px;
        align-items: center;
        height: 30px;

        .left {
          color: #9da9ab;
        }
      }
    }
  }
}
</style>
